<template>
  <div class="login-wrap">
    <div class="header-img">
      <h1 class="header-title">哈院迎新管理系统</h1>
    </div>
    <div class="ms-login">
      <div class="ms-title">登录</div>
      <div style="width: 400px">
        <el-form :model="param" :rules="rules" ref="login" label-width="0px" class="ms-content">
          <el-form-item prop="username">
            <el-input v-model="param.username" placeholder="username">
              <template #prepend>
                <el-button icon="el-icon-user"></el-button>
              </template>
            </el-input>
          </el-form-item>
          <!--        <el-form-item prop="password">-->
          <!--          <el-input type="password" placeholder="password" v-model="param.password"-->
          <!--                    @keyup.enter="submitForm()">-->
          <!--            <template #prepend>-->
          <!--              <el-button icon="el-icon-lock"></el-button>-->
          <!--            </template>-->
          <!--          </el-input>-->
          <!--        </el-form-item>-->
          <el-form-item prop="password">
            <el-input
                type="password"
                placeholder="password"
                v-model="param.password"
            >
              <template #prepend>
                <el-button icon="el-icon-lock"></el-button>
              </template>
            </el-input>
          </el-form-item>
          <el-form-item>
            <el-input v-model="verify" @keyup.enter="submitForm()" class="verifyput">
              <template #prepend>
                <el-button icon="el-icon-price-tag"></el-button>
              </template>
              <template #append class="verify">
                <vVerify ref="verifyRef"/>
              </template>

            </el-input>
          </el-form-item>
          <div class="login-btn">
            <el-button type="primary" @click="submitForm()">登录</el-button>
          </div>
          <p class="login-tips">Tips : 用户名和密码验证码必须填写。</p>
        </el-form>
      </div>

    </div>
  </div>
</template>

<script>
import {ref, reactive, toRefs} from "vue";
import {useStore} from "vuex";
import {useRouter} from "vue-router";
import {ElMessage} from "element-plus";
import request from "../utils/request";
import vVerify from "../components/Verify.vue";

export default {
  components: {
    // eslint-disable-next-line vue/no-unused-components
    vVerify,
  },
  setup() {
    const router = useRouter();
    const param = reactive({
      username: "admin",
      password: "123456",
    });


    const rules = {
      username: [
        {
          required: true,
          message: "请输入用户名",
          trigger: "blur",
        },
      ],
      password: [
        {required: true, message: "请输入密码", trigger: "blur"},
      ],
    };
    const login = ref(null);
    const verifyRef = ref(null);
    const state = reactive({
      verify: "",
    });
    const submitForm = () => {
      if (verifyRef.value.imgCode === state.verify.toUpperCase()) {
        login.value.validate((valid) => {
          if (valid) {
            request.post("/user/login", param).then((res) => {
              if (res.data) {
                //1.18添加
                localStorage.setItem("user", res.data)
                localStorage.setItem("token", res.data.token)
                //1.18添加结束
                localStorage.setItem("ms_username", res.data.userName);
                localStorage.setItem("ms_loginname", res.data.loginName);
                localStorage.setItem("ms_role", res.data.role);
                localStorage.setItem("avatar", res.data.avatar);
                localStorage.setItem("sid", res.data.sid)
                ElMessage.success("登录成功");
                if (res.data.role != null) {
                  router.push("/admin");
                } else {
                  ElMessage.error("未知角色");
                  verifyRef.value.handleDraw();
                  // router.push("/admin");
                  return false;
                }
              } else {
                ElMessage.error("用户名或密码错误");
                verifyRef.value.handleDraw();
                return false;
              }
            });
          } else {
            ElMessage.error("登录失败");
            verifyRef.value.handleDraw();
            return false;
          }
        });
      } else {
        ElMessage.error("验证码错误");
        verifyRef.value.handleDraw();
        return false;
      }
    };


    const store = useStore();
    store.commit("clearTags");

    return {
      param,
      rules,
      login,
      ...toRefs(state),
      verifyRef,
      submitForm,
    };
  },
};
</script>

<style scoped>
.login-wrap {
  position: relative;
  width: 100%;
  height: 100%;
  /*background-image: url(../assets/img/login-bg.jpg);*/
  background-image: url(../assets/img/bg.jpg);
  background-size: 100%;
}

.header-title {
  text-align: center;
  font-size: 65px;
  color: #fff;
  border-bottom: 1px solid #ddd;
}

.ms-title {
  width: 100%;
  line-height: 50px;
  text-align: center;
  font-size: 20px;
  color: #fff;
  border-bottom: 1px solid #ddd;
}

.ms-login {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 470px;
  margin: -190px 0 0 -175px;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.3);
  overflow: hidden;
}

.ms-content {
  /*padding: 30px 30px;*/

  padding-top: 15px;
  padding-left: 45px;
  padding-right: 45px;
}

.login-btn {
  text-align: center;
}

.login-btn button {
  width: 100%;
  height: 36px;
  margin-bottom: 10px;
}

.verifyput {
  padding-right: 0;
}

.login-tips {
  font-size: 12px;
  line-height: 30px;
  color: #fff;
}
</style>